<template>
  <h2>路由测试</h2>

  <div class="nav">
    <div @click="goPage(0)">首页</div>
    <div @click="goPage(1)">新闻</div>
    <div @click="goPage(2)">关于</div>
  </div>

  <hr />

  <div>
    <RouterView></RouterView>
  </div>
</template>

<script setup>
import router from '@/router'
import { RouterView } from 'vue-router'

const goPage = (val) => {
  switch (val) {
    case 0:
      router.push('/')
      break
    case 1:
      router.push('/News')
      break
    case 2:
      router.push('/About')
      break
    default:
      router.push('/')
      break
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 600px;
  background-color: #97c8de;
  display: flex;

  div {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: #c0ced4;
      cursor: pointer;
    }
  }
}
</style>
